এইচটিএমএল ডোম ব্যবহার করে জাভাস্ক্রিপ্ট এইচটিএমএল ডকুমেন্টের সকল এলিমেন্টকে এক্সেস এবং পরিবর্তন করতে পারে।
যখন একটি ওয়েব পেজ ব্রাউজারে সম্পূর্ণভাবে লোড হয় ব্রাউজারটি পেজের একটি ডকুমেন্ট অবজেক্ট মডেল তৈরি করে।
সাধারণত অবজেক্টের একটি ট্রি আকারে এইচটিএমএল ডোম মডেলটি তৈরি করা হয়:
একটি ডায়নামিক এইচটিএমএল পেজ তৈরি করার জন্য জাভাস্ক্রিপ্ট অবজেক্ট মডেল দ্বারা সব ধরনের ক্ষমতা অর্জন করে :
ডোম W3C (World Wide Web Consortium) এর স্ট্যান্ডার্ড।
ডোম ডকুমেন্টকে এক্সেস করার একটি স্ট্যান্ডার্ড নির্দেশ করে:
W3C ডোম স্ট্যান্ডার্ড ৩টি ভিন্ন ভিন্ন অংশে বিভক্ত:
এইচটিএমএল ডোম এইচটিএমএলের জন্য একটি স্ট্যান্ডার্ড অবজেক্ট মডেল এবং প্রোগ্রামিং ইন্টারফেস।এটা যা নির্দেশ করেঃ
অন্যকথায়: এইচটিএমএল এলিমেন্টকে পেতে, পরিবর্তন করতে, যোগ করতে, ডিলিট করার জন্য এইচটিএমএল ডোম হলো স্ট্যান্ডার্ড।
এইচটিএমএল ডোম মেথডগুলো হলো প্রক্রিয়া বা কাজ যা আপনি এইচটিএমএল এলিমেন্টে ঘটাতে পারবেন।
এইচটিএমএল ডোম এলিমেন্টের প্রোপার্টিগুলো হলো ভ্যালু যা আপনি যেকোন সময় সেট অথবা পরিবর্তন করতে পারেন।
জাভাস্ক্রিপ্ট দ্বারা এইচটিএমএল ডোমকে এক্সেস করা যায়(অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ দিয়েও করা যায়)।
ডোম-এ সকল এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে বিবেচনা করা হয়।
প্রতিটি অবজেক্টের প্রোপার্টি এবং মেথড হলো প্রোগ্রামিং ইন্টারফেস।
প্রোপার্টি হলো একটি ভ্যালু যা আপনি এক্সেস করতে পারেন বা সেট করতে পারেন(যেমনঃ একটি এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করা)।
মেথডহলো আপনি যা ঘটাবেন(যেমনঃ এইচটিএমএল এলিমেন্ট বাদ দেয়া বা যোগ করা)।
নিম্নলিখিত উদাহরণে id="test" যুক্ত
kt_satt_skill_example_id=1323
উপরোক্ত উদাহরণে, getElementById হলো একটি মেথড যেখানে innerHTML হলো একটি প্রোপার্টি।
একটি এইচটিএমএল এলিমেন্টকে এক্সেস করার সবচেয়ে সহজ পদ্ধতি হলো এলিমেন্টের id ব্যবহার করা।
উপরোক্ত উদাহরণে, এলিমেন্টকে খুজে পেতে getElementById মেথড id="test" ব্যবহার করেছে।
একটি এলিমেন্টের কন্টেন্টকে এক্সেস অথবা পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি হলো innerHTML প্রোপার্টি ব্যবহার করা।
একটি ওয়েব পেজের সকল অবজেক্টের মালিক হলো এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট।
ডকুমেন্ট অবজেক্ট একটি পেজকে প্রদর্শন করে।
একটি এইচটিএমএল পেজের যেকোন এলিমেন্টকে এক্সেস করতে অবশ্যই ডকুমেন্ট অবজেক্ট দিয়ে শুরু করতে হবে।
নিম্নলিখিত উদাহরণে এইচটিএমএল এলিমেন্টকে কিভাবে এক্সেস এবং পরিচালনা করা যায় তা দেখানো হলো:
| মেথড | বর্ণনা |
|---|---|
| document.getElementById(id) | এলিমেন্টের id দ্বারা এলিমেন্টকে খুঁজে বের করা হয় |
| document.getElementsByTagName(name) | ট্যাগের নাম দিয়ে এলিমেন্টকে খুঁজে বের করা হয় |
| document.getElementsByClassName(name) | এলিমেন্টের class দ্বারা এলিমেন্টকে খুঁজে বের করা হয় |
| মেথড | বর্ণনা |
|---|---|
| element.innerHTML = নতুন এইচটিএমএল কন্টেন্ট | একটি এলিমেন্টের ভিতরের কন্টেন্টকে পরিবর্তন করে |
| element.attribute = নতুন ভ্যালু | এইচটিএমএল এলিমেন্টের এট্রিবিউট ভ্যালু পরিবর্তন করে |
| element.setAttribute(এট্রিবিউট, ভেলু(value)) | এইচটিএমএল এলিমেন্টের এট্রিবিউট ভ্যালু পরিবর্তন করে |
| element.style.property = নতুন স্টাইল | এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করে |
| মেথড | বর্ণনা |
|---|---|
| document.createElement(এলিমেন্ট) | নতুন এলিমেন্ট তৈরি করে |
| document.removeChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্টকে মুছে দেয় |
| document.appendChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্ট যোগ করে |
| document.replaceChild(এলিমেন্ট) | এইচটিএমএল এলিমেন্টকে প্রতিস্থাপন করে |
| document.write(টেক্সট) | এইচটিএমএল ডকুমেন্টে লিখার জন্য ব্যবহার করে |
| মেথড | বর্ণনা |
|---|---|
| document.getElementById(id).onclick = function(){কোড} | একটি অনক্লিক ইভেন্টে ইভেন্ট হ্যান্ডলার কোড যোগ করে |
প্রথম এইচটিএমএল ডোম আবিষ্কৃত হয় ১৯৯৮ সালে, যেখানে ১১টি এইচটিএমএল অবজেক্ট, অবজেক্ট কালেকশন এবং প্রোপার্টি ছিল। এগুলো এইচটিএমএল ৫ এ এখনো ভ্যালিড।
পরবর্তীতে এইচটিএমএল ডোম লেভেল ৩ এ আরও অবজেক্ট, অবজেক্ট কালেকশন, এবং প্রোপার্টি সংযুক্ত করা হয়েছে।
| প্রোপার্টি | বর্ণনা | ডোম |
|---|---|---|
| document.anchors | যেসকল এলিমেন্টের name এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.applets | সকল | ১ |
| document.baseURI | ডকুমেন্টের base URI রিটার্ন করে | ৩ |
| document.body | এলিমেন্টকে রিটার্ন করে | ১ |
| document.cookie | ডকুমেন্টের কুকি রিটার্ন করে | ১ |
| document.doctype | ডকুমেন্টের doctype এর নাম রিটার্ন করে | ৩ |
| document.documentElement | এলিমেন্টকে রিটার্ন করে | ৩ |
| document.documentMode | ব্রাউজারের ব্যবহৃত মুডকে রিটার্ন করে | ৩ |
| document.documentURI | ডকুমেন্টের URI রিটার্ন করে | ৩ |
| document.domain | ডকুমেন্ট সার্ভারের ডোমেইনের নাম রিটার্ন করে | ১ |
| document.domConfig | অপ্রচলিত ডোম কনফিগারেশান রিটার্ন করে | ৩ |
| document.embeds | সকল | ৩ |
| document.forms | সকল | ১ |
| document.head | এলিমেন্ট রিটার্ন করে | ৩ |
| document.images | সকল | ১ |
| document.implementation | ডোম ইমপ্লিমেনটেশন রিটার্ন করে | ৩ |
| document.inputEncoding | ডকুমেন্ট এনকোডিং রিটার্ন করে | ৩ |
| document.lastModified | ডকুমেন্ট আপডেট হওয়ার তারিখ এবং সময় রিটার্ন করে | ৩ |
| document.links | যেসকল এবং এলিমেন্টে href এট্রিবিউট রয়েছে সেগুলোকে রিটার্ন করে | ১ |
| document.readyState | ডকুমেন্টের স্ট্যাটাস রিটার্ন করে | ৩ |
| document.referrer | লিঙ্কিং ডকুমেন্টের নির্দেশকের URI রিটার্ন করে | 1 |
| document.scripts | সকল |
